<script setup>
import { ref, onMounted } from 'vue'
import { loginApi } from '../../api/login';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const username = ref('')
const password = ref('')
const captcha = ref('')
const remember = ref(true)
const captchaCode = ref('')
const captchaImgScale = ref('scale(1)')
const focusedInput = ref('')
const loginSuccess = ref(false)
const loginBtnBg = ref('linear-gradient(135deg, #0a5f00 0%, #1e7e34 100%)')
const router = useRouter();

//验证码生成
function generateCaptcha() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ23456789'
  let result = ''
  for (let i = 0; i < 4; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  captchaCode.value = result
  captchaImgScale.value = 'scale(0.95)'
  setTimeout(() => {
    captchaImgScale.value = 'scale(1)'
  }, 200)
}

// 校验验证码（不分大小写）
function validateCaptcha() {
  return captcha.value.trim().toLowerCase() === captchaCode.value.toLowerCase()
}

// 校验用户名和密码
function validateUserInput() {
  const usernamePattern = /^[\u4e00-\u9fa5_a-zA-Z0-9@.]{1,20}$/
  if (!username.value || !usernamePattern.test(username.value)) {
    ElMessage.error('用户名格式不正确')
    return false
  }
  if (!password.value || password.value.length < 6 || password.value.length > 20) {
    ElMessage.error('密码长度需为6-20位')
    return false
  }
  return true
}

// 修改登录方法
const login = async () => {
  if (!validateUserInput()) return
  if (!validateCaptcha()) {
    ElMessage.error('验证码错误')
    generateCaptcha()
    return
  }
  const result = await loginApi({ username: username.value, password: password.value })
  if (result.success) {
    ElMessage.success('登录成功')
    localStorage.setItem('loginUser', JSON.stringify(result.data))
    router.push('/index')
  } else {
    ElMessage.error('登录失败')
  }
}

function iconStyle(type) {
  return {
    color: focusedInput.value === type ? '#0a5f00' : '#1e7e34',
    transform:
      focusedInput.value === type
        ? 'translateY(-50%) scale(1.2)'
        : 'translateY(-50%) scale(1)',
    transition: 'all 0.3s'
  }
}

onMounted(() => {
  generateCaptcha()
})
</script>

<template>
  <!-- 背景装饰 -->
    <div class="bg-pattern"></div>
    
    <!-- 银行Logo -->
    <div class="bank-logo">
        <div class="logo-circle">
            <i class="fas fa-piggy-bank"></i>
        </div>
        <h2>农业银行 <span>ABC</span></h2>
    </div>
    
    <!-- 登录表单 -->
    <div class="login-container">
        <div class="logo">
            <h1>MERCHANT MANAGEMENT SYSTEM</h1>
            <p>商户管理系统</p>
            <div class="chinese-title">安全 · 高效 · 专业</div>
        </div>
        
        <!-- 在表单部分 -->
<form @submit.prevent="login" id="loginForm">
  <div class="input-group" :class="{ focused: focusedInput === 'username' }">
    <i class="fas fa-user" :style="iconStyle('username')"></i>
    <input
      type="text"
      id="username"
      placeholder="请输入用户名"
      required
      v-model="username"
      maxlength="20"
      pattern="^[\u4e00-\u9fa5_a-zA-Z0-9@.]{1,20}$"
      @focus="focusedInput = 'username'"
      @blur="focusedInput = ''"
      autocomplete="username"
    />
  </div>
  <div class="input-group" :class="{ focused: focusedInput === 'password' }">
    <i class="fas fa-lock" :style="iconStyle('password')"></i>
    <input
      type="password"
      id="password"
      placeholder="请输入密码"
      required
      v-model="password"
      maxlength="20"
      minlength="6"
      @focus="focusedInput = 'password'"
      @blur="focusedInput = ''"
      autocomplete="current-password"
    />
  </div>
  <div class="captcha-container">
    <div
      class="input-group"
      :class="{ focused: focusedInput === 'captcha' }"
    >
      <i
        class="fas fa-shield-alt"
        :style="iconStyle('captcha')"
      ></i>
      <input
        type="text"
        id="captcha"
        placeholder="请输入验证码"
        required
        v-model="captcha"
        @focus="focusedInput = 'captcha'"
        @blur="focusedInput = ''"
      />
    </div>
    <div
      class="captcha-img"
      id="captchaImg"
      @click="generateCaptcha"
      :style="{ transform: captchaImgScale }"
    >
      <span>{{ captchaCode }}</span>
    </div>
  </div>
  <div class="options">
    <label class="remember">
      <input type="checkbox" v-model="remember" /> 记住账号
    </label>
    <a href="#" class="forgot-password">忘记账号或密码？</a>
  </div>
  <button
    type="submit"
    class="login-btn"
    :style="{ background: loginBtnBg }"
  >
    <span v-if="!loginSuccess"><slot>登 录</slot></span>
  </button>
</form>
        
        <div class="security-tips">
            <h4><i class="fas fa-shield-alt"></i> 安全提示</h4>
            <p>1. 请确保在安全的网络环境下登录系统<br>
            2. 请勿在公共场所或他人设备上保存登录信息<br>
            3. 建议定期更改密码以保障账户安全</p>
        </div>
        
        <div class="footer">
            <p>© 2025 农业银行商户管理系统 | <a href="#">隐私政策</a> | <a href="#">使用条款</a> | <a href="#">帮助中心</a></p>
        </div>
</div>
</template>

<style scoped>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0a5f00 0%, #1e7e34 50%, #0a5f00 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        
        /* 装饰性背景元素 */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            background: linear-gradient(135deg, #0a5f00 0%, #1e7e34 50%, #0a5f00 100%);
            background-image:
                linear-gradient(135deg, #0a5f00 0%, #1e7e34 50%, #0a5f00 100%),
                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 10%),
                radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 10%);
            opacity: 1;
            pointer-events: none;
        }
        
        .bank-logo {
            position: absolute;
            top: 30px;
            left: 30px;
            display: flex;
            align-items: center;
            color: white;
            z-index: 10;
        }
        
        .bank-logo .logo-circle {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
        
        .bank-logo .logo-circle i {
            color: #0a5f00;
            font-size: 28px;
        }
        
        .bank-logo h2 {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .bank-logo h2 span {
            font-weight: 300;
            font-size: 18px;
        }
        
        /* 登录卡片 */
        .login-container {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            padding: 40px;
            width: 100%;
            max-width: 450px;
            z-index: 2;
            position: relative;
            overflow: hidden;
            animation: fadeIn 0.8s ease-out;
            margin: 0 auto;
            margin-top: 80px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .logo {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .logo h1 {
            color: #0a5f00;
            font-size: 32px;
            letter-spacing: 1px;
            font-weight: 700;
            margin-bottom: 5px;
            text-shadow: 0 2px 2px rgba(0,0,0,0.05);
        }
        
        .logo p {
            color: #666;
            font-size: 16px;
            letter-spacing: 0.5px;
            font-weight: 500;
        }
        
        .logo .chinese-title {
            color: #1e7e34;
            font-size: 22px;
            margin-top: 5px;
            font-weight: 600;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
        
        .input-group input {
            width: 100%;
            padding: 16px 20px;
            padding-left: 55px;
            border: 1px solid #ddd;
            background: #f9f9f9;
            border-radius: 10px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .input-group input::placeholder {
            color: #999;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #1e7e34;
            box-shadow: 0 0 0 3px rgba(30, 126, 52, 0.2);
            background: #fff;
        }
        
        .input-group i {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #1e7e34;
            font-size: 20px;
            transition: all 0.3s;
        }
        
        .captcha-container {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .captcha-container input {
            flex: 1;
        }
        
        .captcha-img {
            background: #f0f7f0;
            border: 1px solid #ddd;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 130px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .captcha-img:hover {
            background: #e0efe0;
        }
        
        .captcha-img span {
            color: #1e7e34;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: 3px;
            transform: rotate(-5deg);
        }
        
        .options {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            font-size: 14px;
        }
        
        .remember {
            display: flex;
            align-items: center;
            color: #666;
        }
        
        .remember input {
            margin-right: 8px;
            accent-color: #1e7e34;
        }
        
        .forgot-password {
            color: #1e7e34;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .forgot-password:hover {
            color: #0a5f00;
            text-decoration: underline;
        }
        
        .login-btn {
            width: 100%;
            padding: 16px;
            border: none;
            background: linear-gradient(135deg, #0a5f00 0%, #1e7e34 100%);
            color: white;
            font-size: 18px;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 2px;
            box-shadow: 0 5px 15px rgba(30, 126, 52, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .login-btn:hover {
            background: linear-gradient(135deg, #094e00 0%, #186d2d 100%);
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(30, 126, 52, 0.6);
        }
        
        .login-btn:active {
            transform: translateY(0);
        }
        
        .login-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(30deg);
            transition: all 0.8s;
        }
        
        .login-btn:hover::after {
            transform: rotate(30deg) translate(20%, 20%);
        }
        
        .footer {
            text-align: center;
            margin-top: 25px;
            color: #888;
            font-size: 14px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .footer a {
            color: #1e7e34;
            text-decoration: none;
            margin: 0 10px;
            font-weight: 500;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
        
        .security-tips {
            background: #f0f7f0;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            border-left: 4px solid #1e7e34;
        }
        
        .security-tips h4 {
            color: #1e7e34;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        
        .security-tips h4 i {
            margin-right: 8px;
        }
        
        .security-tips p {
            color: #666;
            font-size: 13px;
            line-height: 1.5;
        }
        
        /* 响应式设计 */
        @media (max-width: 500px) {
            .login-container {
                padding: 30px 20px;
                margin: 0 15px;
            }
            
            .logo h1 {
                font-size: 26px;
            }
            
            .captcha-container {
                flex-direction: column;
            }
            
            .captcha-img {
                width: 100%;
                padding: 12px;
            }
            
            .bank-logo {
                top: 20px;
                left: 20px;
            }
            
            .bank-logo .logo-circle {
                width: 40px;
                height: 40px;
            }
            
            .bank-logo h2 {
                font-size: 18px;
            }
        }
    </style>